<template>
	<div class="sw_carousel_wrapper" :style="{ '--carouselHeight': height }">
		<el-carousel height="100%" :autoplay="autoplay" :interval="interval" @change="carouselChange">
			<el-carousel-item v-for="(item, index) in data" :key="index"><img :src="item.imgsrc" /></el-carousel-item>
		</el-carousel>
	</div>
</template>
<script>
export default {
	name: 'swCarousel',
	props: {
		data: {
			type: Array,
			default() {
				return [];
			}
		},
		autoplay: {
			type: Boolean,
			default: true
		},
		height: {
			type: [Number, String]
		}
	},
	data() {
		return {
			interval: 1000
			/* screenHeight: '1070px',
			index: -1,
			tableData: [
				{ url: 'http://47.101.197.7:8081/hkdb/system/2023/4/20/1681976689197_5520.jpg' },
				{ url: 'http://47.101.197.7:8081/hkdb/system/2023/5/9/1683616424272_9801.jpg' }
			],
			videoDuration: 0,
			indexSetTimeout: '' */
		};
	},
	computed: {
		bannerListData() {
			let arr = [];
			this.data.forEach((item) => {
				let obj = { ...item };
				
			});
		}
	},
	mounted() {
		window.onresize = () => {
			//this.windowOnresize();
		};
	},
	methods: {
		carouselChange(index) {
			console.log(this.data);
			if (index === 1) {
				this.interval = 5000;
			} else {
				this.interval = 1000;
			}
			console.log(this.data[index]);
		}
		/* //页面加载时触发
		ready(bannerList) {
			this.tableData = bannerList;
			var _this = this;
			window.setTimeout(function() {
				_this.carouselSetTimeout();
			}, 500);
		},
		funvideoTimeupdate(item, id) {
			if (this.tableData[this.index].attachmentId == id) {
				this.videoDuration = (item.target.currentTime / item.target.duration) * 100;
			}
		},
		//屏幕大小发生变化调用
		windowOnresize() {
			if (document.documentElement.clientWidth < 600) {
				this.screenHeight = 220 + 'px';
			} else if (document.documentElement.clientWidth < 1000 && document.documentElement.clientWidth > 600) {
				this.screenHeight = 461 + 'px';
			} else {
				this.screenHeight = $('.videoPlayer:eq(0)').height() + 'px';
			}
		},
		//轮播视频和图片定时器
		carouselSetTimeout(type) {
			if (type) {
				this.$refs.carousel.prev();
				this.index--;
			} else if (this.index != -1 && this.$refs.carousel) {
				this.$refs.carousel.next();
				this.index++;
			}
			if (this.index >= this.tableData.length || this.index < 0) {
				this.index = 0;
			}
			this.item = this.tableData[this.index];
			var _this = this;
			if ($('.home-carousel video').get(0)) {
				$('.home-carousel video')
					.get(0)
					.pause();
			}
			if ($('.ShowFile:eq(' + this.index + ') video').length == 1) {
				$('.ShowFile:eq(' + this.index + ') video').currentTime = 0;
				$('.ShowFile:eq(' + this.index + ') video')[0].play();
				if (this.$config.phone) {
					window.clearTimeout(this.indexSetTimeout);
					this.indexSetTimeout = window.setTimeout(function() {
						_this.carouselSetTimeout();
					}, 10000);
				}
			} else if ($('.ShowFile:eq(' + this.index + ') .img').length == 1) {
				this.videoDuration = 100;
				window.clearTimeout(this.indexSetTimeout);
				this.indexSetTimeout = window.setTimeout(function() {
					_this.carouselSetTimeout();
				}, 10000);
			}
		},
		//左右箭头点击事件
		imgClick(type) {
			this.carouselSetTimeout(type);
		} */
	}
};
</script>
<style lang="scss" scoped>
.sw_carousel_wrapper ::v-deep {
	position: relative;
	padding-top: var(--carouselHeight);
	.el-carousel {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.el-carousel__container img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.el-carousel__indicators {
		left: auto;
		bottom: 15px;
		transform: none;
		right: calc((100vw - 1340px) / 2);
	}
	.el-carousel__button {
		width: 64px;
		height: 4px;
		border-radius: 1px;
	}
}
</style>
